<template>
	<view class="lz-editor" :class="APPTheme">
		<view class='wrapper'>
			<view class='toolbar' @tap="format" v-if="!readOnly">
				<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
				<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
				<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
				<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
				<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
				 data-value="left"></view>
				<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
				 data-value="center"></view>
				<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"
				 data-value="right"></view>
				<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"
				 data-value="justify"></view>
				<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
				<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"
				 data-value="24px"></view>
	
				<view :class="formats.color ? 'ql-active' : ''" class="iconfont icon-text_color" @click="openColorPicker('color')"></view>
				<view :class="formats.backgroundColor? 'ql-active' : ''" class="iconfont icon-fontbgcolor"
				 @click="openColorPicker('backgroundColor')"></view>
	
				<view class="iconfont icon-date" @tap="insertDate"></view>
				<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
				<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"
				 data-value="ordered"></view>
				<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
				 data-value="bullet"></view>
				<view class="iconfont icon-undo" @tap="undo"></view>
				<view class="iconfont icon-redo" @tap="redo"></view>
				<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
				<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
				<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
				<!-- <view class="iconfont icon-charutupian" @tap="insertImage"></view> -->
				<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
				 :data-value="1"></view>
				<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
				 data-value="sub"></view>
				<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
				 data-value="super"></view>
				<view class="iconfont icon-shanchu" @tap="clear"></view>
			</view>
	
			<editor id="editor" class="ql-container theme-bg theme-placeholder" :placeholder="readOnly?'邮件内容...':'开始输入...'" showImgSize showImgToolbar showImgResize
			 @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @input="onInput">
			</editor>
			<!-- 颜色选择器 -->
			<t-color-picker ref="colorPicker" @confirm="confirmColorFn"></t-color-picker>
		</view>
	</view>
</template>

<script>
let that
import {
	mapGetters,
	mapActions
} from 'vuex'
export default {
	props: {
		content: {
			type: Array,
			default: ()=>{
				return []
			}
		},
		htmlContent:{
			type: String,
			default: ()=>{
				return ''
			}
		},
		readOnly:{//是否只读
			type: Boolean,
			default: ()=>{
				return false
			}
		}
	},
	components:{
	},
	data() {
		return {
			formats: {},
			formatName:''
		}
	},
	computed: {
		...mapGetters(['APPTheme', 'userInfo', 'api']),
	},
	mounted() {
		that = this
	},
	onShow() {
		uni.loadFontFace({
			family: 'Pacifico',
			source: 'url("https://sungd.github.io/Pacifico.ttf")'
		})
		
	},
	watch:{
		content:(data)=>{
			//编辑器初始化完成时触发
			that.onEditorReady()
		}
	},
	methods: {
		// 打开颜色选择器
		openColorPicker(name) {
			console.log(name);
			if(this.formats[name]){//如果选择过在点击相当于取消选择颜色
				this.editorCtx.format(name,'')
				return
			}
			this.$refs.colorPicker.open();
			this.formatName=name
		},
		//确认选取颜色
		confirmColorFn(e){
			console.log(e);
			this.editorCtx.format(this.formatName, e.hex)
		},
		//编辑器初始化完成时触发
		onEditorReady() {
			uni.createSelectorQuery().select('#editor').context((res) => {
				this.editorCtx = res.context
				setTimeout(()=>{
					if(that.htmlContent){
						//设置邮件内容
						this.editorCtx.setContents({html:that.htmlContent})
					}else{
						//设置邮件内容
						this.editorCtx.setContents({delta:that.content})
					}
					
					// //获取邮件内容
					// this.editorCtx.getContents({
					// 	success(e) {
					// 		let req={
					// 			detail:e
					// 		}
					// 		that.$emit('input',req)
					// 	}
					// })
				},700)
				
			}).exec()
		},
		//撤销
		undo() {
			this.editorCtx.undo()
		},
		// 恢复
		redo() {
			this.editorCtx.redo()
		},
		format(e) {
			console.log(e);
			let {
				name,
				value
			} = e.target.dataset
			if (!name) return
			// console.log('format', name, value)
			this.editorCtx.format(name, value)
		
		},
		//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
		onStatusChange(e) {
			const formats = e.detail
			this.formats = formats
		},
		// 插入分割线
		insertDivider() {
			this.editorCtx.insertDivider({
				success: function() {
					console.log('insert divider success')
				}
			})
		},
		//清空
		clear() {
			this.editorCtx.clear({
				success: function(res) {
					console.log("clear success")
				}
			})
		},
		//插入日期
		insertDate() {
			const date = new Date()
			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
			this.editorCtx.insertText({
				text: formatDate
			})
		},
		//插入图片
		// insertImage() {
		// 	uni.chooseImage({
		// 		count: 1,
		// 		success: (res) => {
		// 			this.editorCtx.insertImage({
		// 				src: res.tempFilePaths[0],
		// 				alt: '图像',
		// 				success: function() {
		// 					console.log('insert image success')
		// 				}
		// 			})
		// 		}
		// 	})
		// },
		onInput(e){
			this.$emit('input',e)
		}
	}
};
</script>

<style scoped lang="scss">
.lz-editor{
	@import "./editor-icon.css";
	.wrapper {
		padding: 5px;
		.toolbar {
			box-sizing: border-box;
			border-bottom: 0;
			font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
			.iconfont {
				display: inline-block;
				padding: 8px 8px;
				width: 24px;
				height: 24px;
				cursor: pointer;
				font-size: 20px;
			}
			.ql-active {
				color: #06c;
			}
		}
		.ql-container {
			box-sizing: border-box;
			padding: 12px 15px;
			width: 100%;
			min-height: 30vh;
			height: auto;
			margin-top: 20px;
			font-size: 16px;
			line-height: 1.5;
		}
		
		
	}
	
	
	
	
	
	
	
	
	
}
</style>
